<template>
  <div>
    <el-row type="flex" :gutter="20">
      <el-col :span="12">
        <sysPaper @addtoMinePaper="addtoMinePaper" />
      </el-col>
      <el-col :span="12">
        <minePaper ref="minePaper" @previewPaper="previewPaper" />
      </el-col>
    </el-row>
    <el-row type="flex" :gutter="20" style="margin-top: 20px;"  v-if="examinationPaperId">
      <el-col :span="12">
        <submitPreview ref="submitPreview" :examinationPaperId="examinationPaperId" :paperData="paperData" />
      </el-col>
      <el-col :span="12">
        <submitTable :examinationPaperId="examinationPaperId" :title="title" @examinationPreview="examinationPreview" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import sysPaper from '@/components/examination/sysPaper.vue'
  import minePaper from '@/components/examination/minePaper.vue'
  import submitPreview from '@/components/examination/submitPreview.vue'
  import submitTable from '@/components/examination/submitTable.vue'
  export default {
    components: {
      sysPaper,
      minePaper,
      submitPreview,
      submitTable,
    },
    data() {
      return {
        examinationPaperId: 0,
        title: '',
        paperData: {}
      }
    },
    methods: {
      examinationPreview(data) {
        this.$refs.submitPreview.examinationPreview(data)
      },
      previewPaper(data) {
        this.paperData = data
        this.title = data.title
        this.examinationPaperId = data.examinationPaperId
      },
      addtoMinePaper(data) {
        this.$refs.minePaper.addtoMinePaper(data)
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
